const {
  override,
  addWebpackAlias,
  overrideDevServer,
  addWebpackPlugin,
  disableEsLint,
  fixBabelImports,
  setWebpackOptimizationSplitChunks,
} = require("customize-cra");
const alias = require("./config/alias");
const { proxyConfig } = require("./config/proxy");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
// const cdnPlugin = require("./cdn-plugin");

const productionConfig = (config) => {
  // 生产环境下，禁止eslint检测
  disableEsLint(),
    // 修改到UglifyJsPlugin且打开多线程
    setWebpackOptimizationSplitChunks({
      chunks: "all", //By default, it acts on asynchronous chunk, and the value is all/initial/async
      minSize: 30000, //The default value is 30kb, the minimum size of the code block
      minChunks: 1, //How many modules are shared by, and the number of times the module is referenced before splitting
      maxAsyncRequests: 5, //Load on demand maximum number of parallel requests
      maxInitialRequests: 5, //The maximum number of parallel requests for an entry
      name: true, //The packaged name is the name of the chunk by default. It is separated by a separator (the default is ～), such as vendor~
      cacheGroups: {
        //Set the cache group to extract chunk s that meet different rules. Take generating common as an example
        vendors: {
          test: /node_modules/, //condition
          priority: -10, //Priority: a chunk is likely to satisfy multiple cache groups and will be extracted to the cache group with higher priority. In order to make the user-defined cache group have a higher priority (default 0), the priority attribute of the default cache group is negative
        },
        commons: {
          minSize: 0, //Minimum number of bytes extracted
          minChunks: 2, //At least a few chunk s refer to it
          priority: -20,
          reuseExistingChunk: true, //    If the chunk that has been extracted is referenced in the chunk, the chunk will be directly referenced, and the packaged code will not be repeated
        },
      },
    }),
    addWebpackPlugin(
      new UglifyJsPlugin({
        // 开启打包缓存
        cache: true,
        // 开启多线程打包
        parallel: true,
        uglifyOptions: {
          // 删除警告
          warnings: false,
          // 压缩
          compress: {
            // 移除console
            drop_console: true,
            // 移除debugger
            drop_debugger: true,
          },
        },
      })
    ),
    delete config.devtool;
  // addWebpackPlugin(cdnPlugin.cdnPlugin)
};

module.exports = {
  webpack: (wConfig) => {
    override(
      // antd按需加载
      fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: "css",
      }),
      // 添加alias路径
      addWebpackAlias({
        ...alias,
      }),
      process.env.NODE_ENV === "production" && productionConfig(wConfig),
      // 在分析环境下生成依赖报告
      process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),

      process.env.NODE_ENV === "development" &&
        addWebpackPlugin(
          new webpack.ProvidePlugin({
            process: "process/browser",
          })
        )
    )(wConfig);
    // wConfig.externals = {
    //   three: "THREE",
    //   // 'scratch-blocks': 'Blockly'
    // };
    return wConfig;
  },
  devServer: overrideDevServer((config) => {
    return {
      ...config,
      proxy: proxyConfig,
    };
  }),
};
